import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { Ref, useRef, useEffect } from 'react';
import { Form, Row, Col, Select, Input, message } from 'antd';
import { AuditPlanMaterialServices } from '../services';

export const AuditModal = ({ isShowAudit, onClose, getPlanInfo }: Record<string, any>) => {
  /**
   * modal的Ref
   * */
  const AuditModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * 关闭弹窗
   */
  const onCloseModal = () => {
    if (AuditModalRef) {
      if (AuditModalRef.current) {
        if (AuditModalRef.current.onModalCancel) {
          AuditModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 审核接口回调
   * */
  const AuditPlanMaterialCallback = (res: any) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      getPlanInfo();
      onCloseModal();
    }
  };

  /**
   * 审核接口
   * */
  const { auditPlanRun, auditPlanLoading } = AuditPlanMaterialServices(AuditPlanMaterialCallback);

  /**
   * 表单对象
   * */
  const [auditTableForm] = Form.useForm();

  /**
   * 审核结果
   * */
  const auditStateArr = [
    {
      id: '1',
      name: '通过',
    },
    {
      id: '2',
      name: '取消',
    },
  ];

  const onModalOk = () => {
    auditTableForm?.validateFields()?.then((res) => {
      let resObj = {
        needMaterialIds: isShowAudit?.selectId,
        ...res,
        purchasePlan: {
          id: isShowAudit?.planInfo?.id,
          state: '1',
          versionNum: isShowAudit?.planInfo?.versionNum,
        },
      };
      auditPlanRun(resObj);
    });
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={AuditModalRef}
      title={isShowAudit?.type === 'checkBox' ? '批量审核物料' : '审核物料'}
      onCancel={onClose}
      onOk={onModalOk}
      confirmLoading={auditPlanLoading}
    >
      <div className={pageStyles['fromView-styles']}>
        <Form labelAlign="right" form={auditTableForm}>
          <Row>
            <Col span={24}>
              <Form.Item
                label="审核结果"
                name="checkState"
                rules={[
                  {
                    required: true,
                    message: `请选择审核结果`,
                  },
                ]}
              >
                <Select placeholder="请选择审核结果" allowClear>
                  {auditStateArr?.map((item) => {
                    return (
                      <Select.Option key={item?.id} value={item?.id}>
                        {item?.name}
                      </Select.Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                label="审核意见"
                name="checkResult"
                rules={[
                  {
                    required: true,
                    message: `请输入审核意见`,
                  },
                ]}
              >
                <Input.TextArea placeholder={`请输入审核意见`} showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
    </OneModal>
  );
};
